$ratio: 0.87;
$inner: 100;
$triangle: 100;
$time: 1;
$tFunction: "linear";
$color: #0073cf;
$aColor: darken($color, 30%);
body {
  background:#e4f7ff;
}
.wrapper {
  position:relative;
  left:45%;
  top:70px;
  animation: spin #{$time}s linear infinite;
  transform-origin:16% 34%;
  height:#{2 * ($ratio * 100)}px;
  width:#{3 * $inner}px;
}
.inner {
  width:0;
  height:0;
  border-bottom:#{$inner * $ratio}px solid #{$color};
  border-left: #{($inner / 2)}px solid transparent;
  border-right: #{($inner / 2)}px solid transparent;
  box-sizing:border-box;
  transform-origin:50% 65%;
  animation:inner #{$time}s linear infinite;
}
.triangle {
  float:left;
  width:0;
  height:0;
  border-bottom:#{$triangle * $ratio}px solid #{$color};
  border-left: #{($triangle / 2)}px solid transparent;
  border-right: #{($triangle / 2)}px solid transparent;
  transform-origin:50% 0%;
  position:relative;
  box-sizing:border-box;
}
.triangle:nth-of-type(2) {
  top: -#{$ratio * 100}px;
  left: -100px;
  animation: a #{$time}s #{$tFunction} infinite;
}
.triangle:nth-of-type(3) {
  transform:rotate(-180deg);
  top:#{$ratio * 100}px;
  left:-100px;
  animation: b #{$time}s #{$tFunction} infinite;
}
.triangle:nth-of-type(4) {
  transform:rotate(60deg);
  top:-#{$ratio * 100}px;
  left:-100px;
  animation: c #{$time}s #{$tFunction} infinite;
}
@keyframes a {
  from {transform:rotate(-60deg) scale(1);}
  
  to {transform:rotate(-60deg) scale(0);border-bottom-color:#{$aColor};}
}
@keyframes b {
  from {transform:rotate(-180deg) scale(1);}
  
  to {transform:rotate(-180deg) scale(0);border-bottom-color:#{$aColor};}
}
@keyframes c {
  from {transform:rotate(60deg) scale(1);}
  
  to {transform:rotate(60deg) scale(0);border-bottom-color:#{$aColor};}
}
@keyframes inner {
  from {transform:rotate(0deg) scale(1);}
  
  to {transform:rotate(60deg) scale(2);}
}
@keyframes spin {
  from {transform:rotate(-60deg)}
  
  to {transform:rotate(60deg)}
}